<%@page import="java.sql.*"%>
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" errorPage="error.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1{
	color:red; /* 颜色 */
	text-align: center; /* 文本在块元素中居中对齐 */
}
.kuang{
	/* width: 700px; 设置块元素的宽度 */
	margin: auto; /* 有宽度的块元素在所属的容器中居中布局 */
}
.content{
	border: 2px solid red; /* 边框：宽度、样式、颜色 */
	display: flex; /* 弹性布局，默认主轴的方向row是水平的 */
	gap: 10px; /* 该容器内各个子项间的间距 */
	padding: 10px; /* 该容器内的项目到容器边框的距离 */
}
.column{
	border: 1px solid gray;
	padding: 10px; /* 该容器内的项目到容器边框的距离 */
	white-space: nowrap; /* 每行的内容不再换行 */
	flex-grow: 1; /* 分配所在容器内多余的空间, 默认值是0，都不占用 */
}
a{
	text-decoration:none;
	color: gray;
}
a:hover { /* 鼠标悬停到超链接上时的样式 */
	color:red;
	text-decoration: underline;
}
</style>
<title>分页显示成语</title>
</head>
<body>
<h1>分页显示成语</h1>
<div class='kuang'><% 
Class.forName("com.mysql.cj.jdbc.Driver");
String stringPage=request.getParameter("page"); //字符串表示的页码
if(stringPage==null)stringPage="1"; //如果没有给页码，默认就看第一页
int currentPage=Integer.parseInt(stringPage); //整数表示的当前页码
int n=20; //当前超链接左边和右边的超链接个数，每边5个
int columnCount=8;//一个页面上显示成语的列数
int cyCountPerColumn=15; //每列包含成语的个数
int begin, over; //第一个及最后一个超链接的页码
int maxPage; //最大页码值
int pageSize; //页面大小，就是一个页面显示成语的个数
try(Connection cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/db?allowMultiQueries=true", "root", "12qwas");
		Statement st=cn.createStatement();
		ResultSet rs=st.executeQuery("select count(*) from chengyu");){ //获取成语的总个数
	rs.next();
	int total=rs.getInt(1);//总的成语个数
	pageSize=columnCount*cyCountPerColumn;//页面大小，就是一个页面显示成语的个数
	maxPage=total/pageSize+(total%pageSize==0?0:1); //最大页码值
	if(currentPage<1)currentPage=1;
	else if(currentPage>maxPage)currentPage=maxPage; //对当前显示的页码进行合理性检测
	begin=currentPage-n; //第一个超链接的页码
	over=currentPage+n; //第后一个超链接的页码
	if(begin<1){ //调整页码
		over-=begin-1;
		if(over>maxPage)over=maxPage;
		begin=1;
	}else if(over>maxPage){
		begin-=over-maxPage;
		if(begin<1)begin=1;
		over=maxPage;
	}
}

%>
	<div class='nav'>
<%
if(begin>1){
	out.println("\t\t<a href='?page=1'>首页</a> ");
}
for(int i=begin;i<=over;++i){
	if(i==currentPage){
		out.println("\t\t<b>"+currentPage+"</b>");
	}else{
		out.println("\t\t<a href='?page="+i+"'>"+i+"</a>");
	}
} 
if(over<maxPage){
	out.print("\t\t<a href='?page="+maxPage+"'>尾页</a> ");
}
%>
	</div>
	<div class='content'>
<% 
try(Connection cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/db?allowMultiQueries=true", "root", "12qwas");
	PreparedStatement ps=cn.prepareStatement("select cy from chengyu limit ?,?")){
	ps.setInt(1, (currentPage-1)*pageSize);
	ps.setInt(2, pageSize);
	try(ResultSet rs=ps.executeQuery()){
		for(int i=0;i<columnCount;++i){ //循环显示每一列
			out.println("\t\t<div class='column'>");
			for(int j=0;j<cyCountPerColumn;++j){ //循环显示每一个成语
				if(rs.next()){ //有记录
					out.println("\t\t\t<p>"+rs.getString(1)+"</p>");
				}else{
					out.println("\t\t\t<p>　　　　</p>");
				}
				
			}
			out.println("\t\t</div>");
		}
	}
}
%>
	</div>
</div>
</body>
</html>

